<template>
  <div style="height:100%">
    <!-- 布局容器 -->
    <el-container style="height:100%">
      <!-- 左侧侧边栏 -->
      <el-aside class="sideBar">
        <div class="text">校园帮</div>
        <el-menu
          :default-active="page"
          class="el-menu-vertical-demo"
          background-color="#364760"
          text-color="#fff"
          active-text-color="#fff"
          :router="true"
        >
          <el-menu-item
            v-for="item in sideBarData"
            :key="item.id"
            @click="changePage(item.page)"
            v-bind="item"
            :index="item.page"
          >
            <!-- <i class="iconfont" v-html="item.icon"></i> -->
            <ul slot="title">
              <li>{{ item.name }}</li>
            </ul>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主要区域 -->
      <el-main class="main-important">
        <!-- <template> -->
        <router-view />
        <!-- </template> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Container',
  data () {
    return {
      // sideBarData:[
      //   {
      //   }
      // ]
    }
  },
  methods: {
    changePage (e) {
      this.page = e
      localStorage.setItem('page', e)
    }
  }
}
</script>

<style scoped>
.sideBar{
width: 13rem;
background-color: #364760
}
</style>
